<template>
	<view class='box'>
		<view class="content">
			<tabControl :current="current" :values="items" bgc="#fff" :fixed="true" :scrollFlag='true' :isEqually='true'
				@clickItem="onClickItem" activeColor="#72a26e"></tabControl>
			<!-- 使用 swiper 配合 滑动切换 -->
			<swiper class="swiper" style="height: 100vh;margin-top: 100rpx;" @change='scollSwiper' :current='current'>
				<swiper-item v-for="(item,index) in items" :key='index'>
					<!-- 使用 scroll-view 来滚动内容区域 -->
					<scroll-view scroll-y="true" style="height: 100%;">
						<block v-if="list.length != 0" >
							<!--  -->
							<view class="whiteCard"  v-for="item in list" :key="item.id" @click="goPage('./introDetail',item.id)">
								<view class="image">
									<image :src="imgapi+item.avatar" mode="aspectFill"></image>
								</view>
								<view class="bottom ">
									<uni-title class="textOver" type="h3" :title="item.title">
									</uni-title>
								</view>
							</view>

							<uni-load-more :status="status" :icon-size="14" :content-text="contentText" />
						</block>
						<view v-else>暂无信息,敬请期待</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import tabControl from '@/components/tabControl-tag/tabControl-tag.vue';
	export default {
		components: {
			tabControl
		},
		data() {
			return {
				items: ['小程序介绍', '种植教程'],
				current: 0,
				show: true,
				ifBottomRefresh: false,
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},
				params: {
					pageNo: 1,
					pageSize: 10,
					categoryId:26,
				},
				list: [],
				imgapi:"",
			}
		},
		//触底加载状态
		onReachBottom() {
			console.log("触底");
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.ifBottomRefresh = true
				//正式服去掉这个延时器
				this.getList()
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			goPage(url, val) {
				uni.navigateTo({
					url: `${url}?id=${val}`
				})
			},
			getList() {
				this.$nextTick(function() {
					const that = this;

					this.imgapi = this.$reqConfig.URLIMAGE
					this.$axios({
						url: "user/public/newsList",
						method: "post",
						data: this.params
					}).then((res) => {
						//请求接口成功之后，判断加载状态，处理数据						
						if (res.result.pages >= this.params.pageNo) {
							if (this.ifBottomRefresh) {
								this.list = this.list.concat(res.result.list)
							} else {
								this.list = res.result.list
							}

						} else {
							this.status = 'noMore'
						}
						if (this.params.pageNo >= res.result.pages) {
							this.status = 'noMore'
						}
						this.params.pageNo++;

					})
				})
			},
			onClickItem(val) {
				console.log(val);
				
				this.current = val.currentIndex
				this.clearList()
				this.params.categoryId = this.current == 0? 26:27
				this.getList()
			},
			clearList(){
				this.list = [];
				this.params = {
					pageNo: 1,
					pageSize: 10
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},
			scollSwiper(e) {
				this.current = e.target.current
			}
		},
	}
</script>

<style lang='scss' scoped>
	/deep/.segmented-control__item--text {
		border-bottom-style: none !important;
	}

	/deep/.segmented-control__item--text::after {
		display: inline-block;
		content: "";
		width: 55rpx;
		height: 5rpx;
		background-color: #3cc51f;
		position: absolute;
		bottom: 10px;
	}

	/deep/.uni-tag--success {
		background: linear-gradient(90deg, #89ae47, #6d9417);
	}

	/deep/.uni-tag--default {
		background: linear-gradient(90deg, #ce6248, #f77e81);
	}

	/deep/.uni-tag--warning {
		background: linear-gradient(90deg, #f6af6b, #b75f33);
	}

	/deep/.uni-tag--error {
		background: linear-gradient(90deg, #2ab0fe, #027aef);
	}

	/deep/.uni-tag--mini {
		font-size: 19rpx !important;
		display: inline-block;
		padding: 8rpx 18rpx !important;
		border: none !important;
	}

	.content {
		padding: 0 25rpx;
		margin-top: 40rpx;

		/deep/.segmented-control {
			height: 100rpx;
		}

		.whiteCard {
			// padding-top: 0;
			margin-bottom: 30rpx;
			padding: 0;

			.image {
				height: 200rpx;

				image {
					height: 100%;
					width: 100%;
				}
			}

			.bottom {
				padding: 20rpx;
				padding-top: 0;

				/deep/.uni-h3 {
					width: 100%;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.secondTit {
					color: #999;
					font-size: 28rpx;
					margin-top: -10rpx;
				}

				.litText {
					color: #999;
					font-size: 28rpx;
					margin: 25rpx 0;
				}

				.line {
					margin-top: 0;
					width: 100%;
				}

				.timeSay {
					margin: 30rpx 0 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					color: #999;

					.rightTit {
						// color: #4cd964;
					}
				}
			}
		}
	}

	/deep/.segmented-control__text {
		font-size: 40rpx;
		font-weight: bold;
	}

	.widthBtn {
		width: 100% !important;
	}

	.movable-area {
		width: 100%;
		height: calc(100vh - 100rpx);
		position: fixed;
		top: 0;
		z-index: 0;
		pointer-events: none;
	}

	.shareBox {
		width: 60rpx;
		height: 80rpx;
		position: relative;
		margin-left: 20rpx;
	}

	.sharebtn {
		position: absolute;
		height: 80rpx;
		width: 60rpx;
		z-index: 99;
		opacity: 0.1;
		background-color: #fff;
	}

	.movable-view {
		pointer-events: auto;
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		border-radius: 50%;
		top: 70%;
		left: 730rpx;
		color: #fff;
		font-size: 20rpx;
		font-weight: bold;
		text-align: center;
		opacity: 0.7;
		background: #4CD964;
	}

	.topBox {
		width: 100%;
		height: calc(100vh - 120rpx);
		margin-bottom: 20rpx;
	}

	.localImage {
		width: 750rpx;
		height: 400rpx;
	}

	.informationBox {
		height: 470rpx;
		border-radius: 15rpx;
		width: 700rpx;
		margin-top: -80rpx;
		background-color: #fff;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		margin: 0 auto;
		background-color: #fff;
	}

	.xinxi {
		height: 100%;
		width: 100%;
		margin-bottom: 20rpx;
	}

	.avatarUrl {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #c4c4c4;
	}

	.name {
		/* margin-left: 25rpx; */
		font-size: 35rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 80%;
		margin-left: 20rpx;
	}

	.collectionimg {
		width: 35rpx;
		height: 35rpx;

	}

	.line {
		width: 96%;
		margin-top: 40rpx;
		border-bottom: 1rpx solid #C4C4C4;

	}

	.shopBottomText {
		font-size: 20rpx;
	}


	.shopBottomBox {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
	}

	.shopBottomBoxleft {
		width: 35%;
		/* margin-top: 20rpx; */
		/* display: flex;
		align-items: center;
		justify-content: space-between; */
		text-align: center;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 28rpx;
		color: #808080;
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.detailsBox {
		height: 180rpx;
		width: 750rpx;
		padding: 20rpx 0;
		display: flex;
	}

	.zhaibox {
		width: 50%;
		background-color: #F0AD4E;
		text-align: center;
		color: #fff;
	}

	.zhongbox {
		width: 50%;
		background-color: #3cc51f;
		text-align: center;
		color: #fff;
	}

	.title {
		width: 750rpx;
		text-align: center;
		margin: 35rpx 0;
		color: #3cc51f;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>
